<template>
  <div class="hotsale">
    <div class="header clearfix">
      <div class="header-left">
        <span class="iconfont left-icon">&#xe604;</span>
        <span class="left-title">猜你喜欢</span>
      </div>
    </div>
    <ul class="list">
      <router-link tag="li"
        class="item clearfix"
        v-for="(item, index) of likeList"
        :key="index"
        :to="'/detail/' + index">
        <div class="img-note">随买随用</div>
        <div class="item-img-wrapper">
          <img class="item-img" :src="item.imgUrl" />
        </div>
        <div class="item-info">
          <p class="item-title">{{item.name}}</p>
          <p>
            <span class="item-score iconfont">
              <span class="item-score-bg">&#xe618;&#xe618;&#xe618;&#xe618;&#xe618;</span>
              <span class="item-score-show" :style="'width:'+item.score*100/5+'%'">&#xe618;&#xe618;&#xe618;&#xe618;&#xe618;</span>
            </span>
            <span class="item-comment">{{item.comment}}条评论</span>
          </p>
          <p class="item-price-info">
            <span class="item-price-unit fontsize">¥</span>
            <span class="item-price">{{item.price}}</span>
            <span class="fontsize">起</span>
            <span class="item-area fontsize">{{item.area}}</span>
          </p>
          <p v-if="item.note" class="note">{{item.note}}</p>
        </div>
      </router-link>
		</ul>
		<div class="bottom">
			<span>查看所有产品</span>
		</div>
	</div>
</template>

<script>
export default{
  name: 'HomeRecommend',
  props: {
    likeList: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
	.hotsale
		padding-top: .2rem
		background: #f5f5f5
		.header
			padding: .24rem 0 .24rem .18rem
			background: #fff
			.header-left
				float: left
				font-size: .32rem
				color: #212121
				.left-icon
					float: left
					margin-right: .05rem
					color: #ff5d56
				.left-title
					float: left
					line-height: .42rem
		.list
			background: #fff
			padding-left: .24rem
			.item
				padding-top: .2rem
				padding-bottom: .18rem
				border-bottom: 2px solid #f2f2f2
				position: relative
				.item-img-wrapper
					width: 2rem
					height: 2rem
					margin-right: .22rem
					float: left
					.item-img
						width: 100%
				.img-note
					width: 1.02rem
					height: .38rem
					line-height: .38rem
					font-size: .2rem
					color: #fff
					text-indent: .03rem
					background-image: url("https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png")
					background-repeat: no
					background-size: 100%
					position: absolute
				.item-info
					float: left
					width: 4.8rem
					padding-right: .24rem
					.item-title
						font-size: .3rem
						color: #33312c
						line-height: .56rem
						font-weight: bold
						margin-top: .2rem
					.item-score
						margin-right: .3rem
						font-size: .14rem
						position: relative
						.item-score-bg
							color: #dad9d7
						.item-score-show
							color: #ffb434
							position: absolute
							left: 0
							top: 0
							right: 0
							bottom: 0
							z-index: 2
							overflow: hidden
					.item-comment
						color: #71717f
						line-height: .48rem
						font-size: .22rem
						display: inline-block
					.item-price-info
						color: #747270
						font-size: 0
						margin-top: .24rem
						.fontsize
							font-size: .2rem
							line-height: .4rem
						.item-price-unit
							color: #ff8e31
						.item-price
							font-size: .4rem
							color: #ff8e31
						.item-area
							float: right
					.note
						height: .4rem
						line-height: .4rem
						background: #fff9f9
						color: #ff434c
						padding: 0 .1rem
						font-size: .22rem
						margin-top: .35rem
		.bottom
			height: .8rem
			line-height: .8rem
			text-align: center
			font-size: .24rem
			color: #00afc7
			background: #fff
</style>
